<template>
    <!--企业能耗历史-->
    <div class="energy_history">
        <div class='headerTab'>
            <div :style="{background:tabactive==='electricity'?'rgba(27, 147, 251, 1)':'rgba(27, 147, 251, .2)'}"
                 @click="tabactive='electricity'">用电
            </div>
            <div :style="{background:tabactive==='water'?'rgba(27, 147, 251, 1)':'rgba(27, 147, 251, .2)'}"
                 @click="tabactive='water'">用水
            </div>
        </div>
        <div class="energy_history_contentflex">
            <div>
                <div class="head_search">
                    <div class="searchSelect">
                        <el-time-select
                            v-model="form.startTime"
                            :max-time="form.endTime"
                            placeholder="开始时间"
                            start="08:30"
                            step="00:15"
                            end="18:30"
                        />
                        —
                        <el-time-select
                            v-model="form.endTime"
                            :min-time="form.startTime"
                            placeholder="结束时间"
                            start="08:30"
                            step="00:15"
                            end="18:30"
                        />
                    </div>
                    <div>
                        <el-button type="primary">搜索</el-button>
                    </div>
                </div>
                <div class="echarts">
                    <CommonTitleComponent text="月度用电量及环比增速"></CommonTitleComponent>
                    <div class="echarts_content">
                        <chart-view
                            :chart-option="EchartsMethods.energyElectric(state.chartData)"
                            :auto-resize="true"
                            height="100%"
                            style="height: 100%"
                        ></chart-view>
                    </div>
                </div>
            </div>
            <div>
                <div class="head_search">
                    <div class="searchSelect">
                        <el-time-select
                            v-model="form.startTime"
                            :max-time="form.endTime"
                            placeholder="开始时间"
                            start="08:30"
                            step="00:15"
                            end="18:30"
                        />
                        —
                        <el-time-select
                            v-model="form.endTime"
                            :min-time="form.startTime"
                            placeholder="结束时间"
                            start="08:30"
                            step="00:15"
                            end="18:30"
                        />
                    </div>
                    <div>
                        <el-button type="primary">搜索</el-button>
                    </div>
                </div>
                <div class="echarts">
                    <CommonTitleComponent text="近24小时环保设备用电变化"></CommonTitleComponent>
                    <div class="echarts_content">
                        <chart-view
                            :chart-option="EchartsMethods.EquipmentElectricity()"
                            :auto-resize="true"
                            height="100%"
                            style="height: 100%"
                        ></chart-view>
                    </div>
                </div>
            </div>
        </div>
        <div class="tail_content">
            <CommonTitleComponent text="用电分类统计"></CommonTitleComponent>
            <div class="classification_statistics_echarts">
                <div class="carCurrent_echarts">
                    <chart-view
                        :chart-option="state.equipmentStatistics"
                        :auto-resize="true"
                        height="100%"
                        style="height: 100%; z-index: 1; position: relative"
                    ></chart-view>
                    <div class="chartInfo">
                        <h3>150.44<i>万度</i></h3>
                        <p>月度用电</p>
                    </div>
                    <img src="@img/keji2.png" alt="" />
                </div>
                <ul class="fr">
                    <li>
                        <div class="fr_card">
                            <p class="blockColor"></p>
                            <div>
                                <p>150.09<i>万度</i></p>
                                <div>生产用电</div>
                            </div>
                        </div>
                        <div class="lastClass">
                            <p>15%</p>
                            <div>占比</div>
                        </div>
                    </li>
                    <li>
                        <div class="fr_card">
                            <p class="blockColor" style="background: #1b93fb"></p>
                            <div>
                                <p style="color: #1b93fb">3542度</p>
                                <div>办公用电</div>
                            </div>
                        </div>
                        <div class="lastClass">
                            <p style="color: #1b93fb">15%</p>
                            <div>占比</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import  ChartView from '@/chart/index.vue';
import {EchartsMethods} from "@/chart/index";
const tabactive = ref('water')
const form=reactive({
    startTime:'',
    endTime:''
})
const datas = {
    alpha: 19,
    distance: 160,
    top: '-7',
    pieData: 30,
    autoRotate: false,
    internalDiameterRatio: 0.85,
    activeVal: {
        value: 120,
        rate: 55
    },
    item: [
        {
            name: '危化品生产',
            value: 80,
            itemStyle: {
                color: '#F23526'
            }
        },
        {
            name: '危化品经营',
            value: 120,
            itemStyle: {
                color: '#1B93FB'
            }
        }
    ]
};
const state = reactive({
    chartData: {
        ename: '用电量',
        Company: '单位：度',
        legname: '用电量（度）',
        elecolor: 'rgba(112, 231, 255, 1)',
        triccolor: 'rgba(70, 127, 251, 1)',
        eleitemcolor: 'rgba(40, 190, 198, 1)',
        elelinecolor: 'rgba(40, 190, 198, 1)',
        type: 'electric'
    },
    equipmentStatistics: {}
});
onMounted(() => {
    nextTick(() => {
        state.equipmentStatistics = EchartsMethods.equipmentStatistics(datas);
    });
});
</script>

<style scoped lang="scss">
@mixin input() {
    --el-input-border-color: transparent;
    --el-input-text-color: #fff;
}

@mixin wrapper() {
    background-color: rgba(255, 255, 255, .12);
    --el-input-border-color: rgba(255, 255, 255, .12);
}

.energy_history {
    padding: 16px 35px;

    .headerTab {
        display: flex;
        justify-content: center;

        div {
            width: 93px;
            height: 28px;
            line-height: 28px;
            background: rgba(27, 147, 251, .2);
            font-size: 14px;
            color: #FFFFFF;
            text-align: center;

            &:nth-of-type(1) {
                margin-right: 16px;
            }
        }
    }

    &_contentflex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 32px;
        >div{
            width: calc(50% - 20px);
        }
        ::v-deep(.el-select){
            width: 46%;
        }
        &:last-child {
            margin-left: 40px;

        }
        .head_search{
            display: flex;
            justify-content: space-between;
            align-items: center;
            >div{
                &:last-child{
                    margin-left: 16px;
                }
                ::v-deep(.el-button){
                  padding:0px 25px;

                }
            }
        }
        .echarts{
            padding-top: 32px;
            &_content{
                margin-top: 15px;
                height: 200px;
            }
        }
    }

    .searchSelect {
        ::v-deep(.el-input) {
            @include input();
            height: 32px;
        }

        ::v-deep(.el-input__wrapper) {
            background-color: rgba(255, 255, 255, .12);

            &:hover {
                box-shadow: none;
            }
        }

        ::v-deep(.el-popper .is-pure .is-light .el-select__popper),
        ::v-deep(.el-select-dropdown) {
            @include wrapper();
        };
        color:rgba(255, 255, 255, .2);
    }
    .tail_content{
        padding-top: 30px;
        .classification_statistics_echarts{
            height: 130px;
            display: flex;
            align-items: center;
            .fr {
                width: 60%;
                padding-right: 20px;
                display: flex;
                align-items: center;
                margin-left: 30px;
                li {
                    width:40%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-right: 1px dashed rgba(255, 255, 255, .49);
                    padding-right: 40px;
                    letter-spacing: 2px;
                    &:last-child{
                        border: none;
                        padding-right: 0;
                        padding-left: 40px;
                    }
                    .lastClass {
                        div {
                            @include fontCustomStyle(#fff, 12px);
                        }
                        p {
                            color: rgba(72, 224, 162, 1);
                            @include pmzd();
                            font-size: 14px;
                            margin-bottom: 2px;


                        }
                    }
                    .fr_card {
                        display: flex;
                        align-items: center;
                        > div {
                            p {
                                color: rgba(72, 224, 162, 1);
                                @include pmzd();
                                font-size: 14px;
                                margin-bottom: 2px;
                                letter-spacing: 2px;
                                i{
                                    font-style: normal;
                                    font-family: Source Han Sans CN;
                                    font-weight: 400;
                                    font-size: 12px;
                                    margin-left: 2px;
                                }
                            }
                            div {
                                @include fontCustomStyle(#fff, 12px);
                            }
                        }
                        .blockColor {
                            width: 10px;
                            height: 6px;
                            background: rgba(72, 224, 162, 1);
                            margin-right: 10px;
                        }
                    }
                }
            }
            .carCurrent_echarts {
                position: relative;
                height: 100%;
                width: 140px;
                .chartInfo {
                    position: absolute;
                    left: 0;
                    top: 22px;
                    text-align: center;
                    width: 100%;
                    color: #fff;
                    z-index: 1;
                    h3 {
                        font-size: 20px;
                        i{
                            font-style: normal;
                            font-size: 12px;
                            font-weight: normal;
                            margin-left: 3px;
                        }
                    }
                    p {
                        color: #dfeef3;
                        font-size: 12px;
                    }
                }
                img {
                    position: absolute;
                    left: 4px;
                    top: 50%;
                    margin-top: -40px;
                    width: 92%;
                    height: 80px;
                    z-index: 0;
                }
            }
        }
    }
}
</style>